
<template>
  <view class="order-details-container">
    <!-- 操作卡片 -->
    <view class="order-card action-card">
      <view class="order-status">订单状态：{{ orderDetail.status ? orderDetail.status.toUpperCase() : '未知' }}</view>
      <view class="actions-container">
        <view v-if="orderDetail.status === '待支付'" class="action pay" @tap="handlePay(orderDetail)">去支付</view>
		<view v-if="orderDetail.status === '退款中'" class="action pay" @tap="updateCancel(orderDetail)">取消退款</view>
        <view v-if="orderDetail.status === '未签到'" class="action refund" @tap="handleRefund(orderDetail)">取消预约</view>
		<view v-if="orderDetail.status === '已过期'" class="action refund" @tap="handleRefund(orderDetail)">申请退款</view>
        <!-- <view v-if="['未发货', '已发货'].includes(orderDetail.status)" class="action receive" @tap="handleReceive(orderDetail)">确认收货</view> -->
      </view>
    </view>

    <!-- 订单信息卡片 -->
    <view class="order-card info-card">
      <view>订单信息</view>
      <view class="order-info-section">
        <view class="order-number">订单编号：{{ orderDetail.ordernumber }}</view>
        <view class="order-time">下单时间：{{ formatDateTime(orderDetail.create_time) }}</view>
        <view class="order-time">更新时间：{{ formatDateTime(orderDetail.update_time) }}</view>
        <view class="order-address">
         预约人：{{ orderDetail.username }}<br>
        <!--  电话：{{ orderDetail.phone ? orderDetail.phone.slice(-4) : '未知' }}<br>
          地址：{{ orderDetail.address_line1 }} {{ orderDetail.address_line2 }} -->
		   电话：{{ orderDetail.phone }}<br>
		   留言：{{ orderDetail.message }}<br>
        </view>
        <!-- <view class="order-payment">支付方式：{{ orderDetail.payment_method }}</view> -->
      </view>
    </view>

    <!-- 商品信息卡片 -->
    <view class="order-card product-card">
      <view>商品信息</view>
      <view class="product-list">
        <view>
          <view class="product-item">
            <image class="product-image" :src="orderDetail.img" mode="aspectFill"></image>
            <view class="product-details">
              <view class="product-name">{{ orderDetail.name }}</view>
			  <view class="product-quantity">预约时间：{{ formatDateTime(orderDetail.appointment_time) }}</view>
			  <view class="product-quantity">截止时间：{{ formatDateTime(orderDetail.deadline) }}</view>
            </view>
            <view class="product-price">￥{{ orderDetail.discount_price || orderDetail.original_price }}</view>
          </view>
        </view>
  <!--      <view v-else>
          暂无商品信息
        </view> -->
      </view>
      <view class="order-summary">
        <view class="summary-item">运费：0</view>
        <view class="summary-item">会员折扣：{{ orderDetail.discount }}%</view>
        <view class="summary-item total">实付款：￥{{ orderDetail.total_amount }}</view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      orderDetail: {
        address_line1: '',
        address_line2: '',
        payment_method: '未提供',
        orderProducts: []
      }
    };
  },
  onLoad(options) {
    this.fetchOrderDetails(options.id);
  },
  methods: {
    fetchOrderDetails(id) {
      const token = uni.getStorageSync('Authorization');
      uni.request({
        url: 'http://localhost:8887/Serviceappointment/select?id=' + id,
        method: 'GET',
        header: {
          'Authorization': token,
          'Content-Type': 'application/json'
        },
        success: (res) => {
          if (res.data.code === 200) {
            this.orderDetail = res.data.data;
            console.log(this.orderDetail);
          } else {
            uni.showToast({
              title: '订单详情获取失败',
              icon: 'none'
            });
          }
        },
        fail: () => {
          uni.showToast({
            title: '请求失败',
            icon: 'none'
          });
        }
      });
    },
    formatDateTime(dateString) {
      if (!dateString) return '';
      const date = new Date(dateString);
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}:${String(date.getSeconds()).padStart(2, '0')}`;
    },
    updateOrderStatus(order, newStatus) {
      const token = uni.getStorageSync('Authorization');
      uni.request({
        url: 'http://localhost:8887/Serviceappointment/updatestatus',
        method: 'POST',
        header: {
          'Authorization': token,
          'Content-Type': 'application/json'
        },
        data: {
          id: order.id,
          status: newStatus
        },
        success: (res) => {
          if (res.data.code === 200) {
            uni.showToast({
              title: '操作成功',
              icon: 'success'
            });
            this.fetchOrderDetails(order.id);
          } else {
            uni.showToast({
              title: '操作失败',
              icon: 'none'
            });
          }
        },
        fail: () => {
          uni.showToast({
            title: '请求失败',
            icon: 'none'
          });
        }
      });
    },
	updateCancel(order){
		const token = uni.getStorageSync('Authorization');
		uni.request({
		  url: 'http://localhost:8887/Serviceappointment/updateCancel',
		  method: 'POST',
		  header: {
		    'Authorization': token,
		    'Content-Type': 'application/json'
		  },
		  data: {
		    id: order.id
		  },
		  success: (res) => {
		    if (res.data.code === 200) {
		      uni.showToast({
		        title: '取消退款成功',
		        icon: 'success'
		      });
		      this.fetchOrderDetails(order.id);
		    } else {
		      uni.showToast({
		        title: '操作失败',
		        icon: 'none'
		      });
		    }
		  },
		  fail: () => {
		    uni.showToast({
		      title: '请求失败',
		      icon: 'none'
		    });
		  }
		});
	},
    handleRefund(order) {
      this.updateOrderStatus(order, '退款中');
    },
    handlePay(order) {
      // 支付逻辑
    }
  }
};
</script>
<style scoped>
.order-details-container {
  padding: 20px;
  background-color: #f5f5f5;
  font-family: 'Roboto', sans-serif;
}

.order-card {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

/* 操作卡片 */
.action-card {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.order-status {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 15px;
}

.actions-container {
  display: flex;
  justify-content: space-around;
  width: 100%;
}

.action {
  padding: 10px 20px;
  border: 1px solid #ddd;
  border-radius: 5px;
  text-align: center;
  margin: 0 10px;
  font-size: 14px;
  color: #333;
  background-color: #f9f9f9;
  transition: background-color 0.3s ease;
}

.action:hover {
  background-color: #eaeaea;
}

/* 订单信息卡片 */
.info-card .order-info-section {
  display: flex;
  flex-direction: column;
}

.order-number, .order-time, .order-address, .order-payment {
  margin-bottom: 15px;
  font-size: 16px;
  color: #555;
}

.order-address {
  line-height: 1.6;
}

/* 商品信息卡片 */
.product-card {
  padding: 20px;
}

.product-list {
  display: flex;
  flex-direction: column;
}

.product-item {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
  border-bottom: 1px solid #eee;
  padding-bottom: 5px;
}

.product-image {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  margin-right: 20px;
}

.product-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.product-name {
  font-size: 16px;
  color: #333;
  margin-bottom: 5px;
}

.product-quantity {
  font-size: 14px;
  color: #666;
}

.product-price {
  font-size: 16px;
  color: #333;
  font-weight: bold;
}

/* 订单总结 */
.order-summary {
  display: flex;
  flex-direction: column;
  margin-top: 5px;
}

.summary-item {
  font-size: 16px;
  color: #555;
  margin-bottom: 10px;
}

.total {
  font-weight: bold;
  color: #ff6666;
}
</style>